$color:#1890ff;
.appdiy-module-attr::-webkit-scrollbar{ width:0;}
.appdiy-module-attr{ width:360px;border-top: 1px solid #eee; border-left: 1px solid #eee; position: fixed; right:0; top:48px; height:100%; overflow:hidden auto; background:#fff;
	 	.module-attr-tab{line-height: 23px; display: flex; border-bottom:1px solid #f1f1f1;
			  li{ flex:1; padding:12px 0; cursor: pointer; border-right:1px solid #f1f1f1; text-align: center; font-size:14px; color:#333; position: relative;
					  &.on{ color:$color}
							&.on:after{ width:56px; height:2px; background:$color; content:''; position: absolute; bottom:0; left:0; right:0; margin:auto;}
					}
			}
			.attr-con-item{ padding:12px; font-weight: bold; border-bottom:1px solid #eee; font-size:14px;}
			.att-con-box{ font-size:13px; color:#555; padding-top: 18px; padding-bottom: 80px;
      .label {width: 80px;text-align: right;}
			/***导航***/
			.attr-nav-item{
				 .ht{ height:46px; padding:0 12px; overflow: hidden; display: flex;  border-bottom:1px solid #eee; justify-content: space-between; align-items: center;
					  .t{ font-size:14px; font-weight: bold; flex:1; cursor: pointer; height:46px; line-height:46px; &.on{ span{ transform: rotate(-180deg); } } }
							.opt{
										.el-button.is-circle{padding:5px; transform: scale(0.8); font-size:12px; margin-left:0;}
										.el-button--primary{background-color:$color; border-color:$color;}
							 }
					}
					.hm{ padding:12px; padding-top:15px; padding-bottom:0; border-bottom:1px solid #eee;}
					.goods{ display: flex; background:#f1f1f1; margin-bottom:12px; margin-top:-5px;
						  img{ width:80px; height:80px; margin-right:12px;}
								.text{ height:80px; overflow: hidden;
								  .p1{color:#333;}
								  p{ padding-top:5px; white-space: nowrap; text-overflow: ellipsis; color:#999;}
								}
					}
          .course{ display: flex; background:#f1f1f1; margin-bottom:12px; margin-top:-5px;
          	  img{ width:80px; height:80px; margin-right:12px;}
          			.text{ height:80px; overflow: hidden;
          			  .p1{color:#333;}
          			  p{ padding-top:5px; white-space: nowrap; text-overflow: ellipsis; color:#999;}
          			}
          }
          .tuan{ display: flex; background:#f1f1f1; margin-bottom:12px; margin-top:-5px;
          	  img{ width:80px; height:80px; margin-right:12px;}
          			.text{ height:80px; overflow: hidden;
          			  .p1{color:#333;}
          			  p{ padding-top:5px; white-space: nowrap; text-overflow: ellipsis; color:#999;}
          			}
          }
          .miaosha{ display: flex; background:#f1f1f1; margin-bottom:12px; margin-top:-5px;
          	  img{ width:80px; height:80px; margin-right:12px;}
          			.text{ height:80px; overflow: hidden;
          			  .p1{color:#333;}
          			  p{ padding-top:5px; white-space: nowrap; text-overflow: ellipsis; color:#999;}
          			}
          }
          .goodscard{ display: flex; background:#f1f1f1; margin-bottom:12px; margin-top:-5px;
          	  img{ width:80px; height:80px; margin-right:12px;}
          			.text{ height:80px; overflow: hidden;
          			  .p1{color:#333;}
          			  p{ padding-top:5px; white-space: nowrap; text-overflow: ellipsis; color:#999;}
          			}
          }
          .technical{ display: flex; background:#f1f1f1; margin-bottom:12px; margin-top:-5px;
          	  img{ width:80px; height:80px; margin-right:12px;}
          			.text{ height:80px; overflow: hidden;
          			  .p1{color:#333;}
          			  p{ padding-top:5px; white-space: nowrap; text-overflow: ellipsis; color:#999;}
          			}
          }
          .store{ display: flex; background:#f1f1f1; margin-bottom:12px; margin-top:-5px;
          	  img{ width:80px; height:80px; margin-right:12px;}
          			.text{ height:80px; overflow: hidden;
          			  .p1{color:#333;}
          			  p{ padding-top:5px; white-space: nowrap; text-overflow: ellipsis; color:#999;}
          			}
          }
			}
			.attr-nav-add{ height:40px; display: flex; cursor:pointer; &:hover{ color:$color;} border-bottom:1px solid #eee; justify-content:center; align-items: center; span{ margin:2px 5px 0 0; font-size:15px;} }
			.att-con-pd{ padding:20px;}
			.item{ margin-bottom:20px; display: flex; &.c{ align-items: center;}
			  .tit.mg{margin-top:-4px;}
					.input{ flex:1; &.flex{ display: flex; align-items: center;}
							.intxt{ padding:6px 10px; color:#555; border:1px solid #eee; border-radius:2px; width:160px; margin-right:10px;}
							.colorBtn{ width:16px; height:16px; border-radius:50%; border:1px solid #ddd; cursor: pointer; }
							.module-upload{ border:1px dashed #eee; overflow: hidden; margin-right:12px; cursor:pointer; position:relative; display: flex; align-items: center; justify-content: center; width:60px; height:60px; background:#f7f8fa; border-radius:2px;
							  &.c{ width:150px; height:100px; }
									.el-icon-camera-solid{ font-size:25px; color:#bfbfbf; opacity:0.8;}
									.el-icon-close{ width:15px; height:14px; font-size:12px; line-height:14px; text-align:center; background-color: rgba(0, 0, 0, 0.7); border-radius: 0 0 0 12px; position:absolute; right:0; top:0; color:#fff; z-index:1;}
									img{ display:block; width:100%; height:100%;}
							}
							.tips{color:#bfbfbf;}
							.el-textarea__inner{ font-family: Avenir, Helvetica, Arial, sans-serif;}
							.input-line{ &:last-child{margin-bottom:0;}  margin-bottom:15px; display: flex; align-items: center; .sp1{ display: flex; cursor: pointer; padding-left: 5px;padding-right: 10px; align-items: center;}
              .sp2{ display: flex; cursor: pointer; padding-left: 5px;padding-right: 10px; align-items: center;}
									.tit{ margin-top:-4px;}

									.el-input__inner{ height:29px; line-height:29px; }
									.el-input__icon{ line-height:29px;}
									.input.f{ display: flex; align-items: center;
									  .font{ margin-left:12px; width:16px;border-radius:50%; height:16px; cursor:pointer; &:hover,&.on{ color:$color;} }
									}
									.el-button{ padding:0 5px; height:29px; line-height:29px; margin-top:5px; margin-right:5px;}
							}
					}
					.attr-style{ display: flex; flex-wrap: wrap;}
					.style{ width:100px; margin-right:12px; margin-bottom:12px; cursor: pointer;
					  img{ width:100%; display: block; margin-bottom:5px;}
							dd{ font-size:12px; text-align: center;
								 .el-radio__input.is-checked .el-radio__inner{ background:$color; border-color: $color;}
								 .el-radio__input.is-checked+.el-radio__label{ color:$color;}
							}
					}
			}
	 }
}
.m-colorPicker .box{
    left: -60px;
  }
